<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋猜月赢豪礼</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <link href="/js/layer.mobile-v2.0/layer_mobile/need/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/layer.mobile-v2.0/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/awardRotate.js"></script>
    <script type="text/javascript">
        // inline lib-flexible
        !function () { var a = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}", b = document.createElement("style"); if (document.getElementsByTagName("head")[0].appendChild(b), b.styleSheet) b.styleSheet.disabled || (b.styleSheet.cssText = a); else try { b.innerHTML = a } catch (c) { b.innerText = a } }(); !function (a, b) { function c() { var b = f.getBoundingClientRect().width; b / i > 540 && (b = 540 * i); var c = b / 10; f.style.fontSize = c + "px", k.rem = a.rem = c } var d, e = a.document, f = e.documentElement, g = e.querySelector('meta[name="viewport"]'), h = e.querySelector('meta[name="flexible"]'), i = 0, j = 0, k = b.flexible || (b.flexible = {}); if (g) { console.warn("å°†æ ¹æ®å·²æœ‰çš„metaæ ‡ç­¾æ¥è®¾ç½®ç¼©æ”¾æ¯”ä¾‹"); var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/); l && (j = parseFloat(l[1]), i = parseInt(1 / j)) } else if (h) { var m = h.getAttribute("content"); if (m) { var n = m.match(/initial\-dpr=([\d\.]+)/), o = m.match(/maximum\-dpr=([\d\.]+)/); n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2))) } } if (!i && !j) { var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), q = a.devicePixelRatio; i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i } if (f.setAttribute("data-dpr", i), !g) if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g); else { var r = e.createElement("div"); r.appendChild(g), e.write(r.innerHTML) } a.addEventListener("resize", function () { clearTimeout(d), d = setTimeout(c, 300) }, !1), a.addEventListener("pageshow", function (a) { a.persisted && (clearTimeout(d), d = setTimeout(c, 300)) }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function () { e.body.style.fontSize = 12 * i + "px" }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) { var b = parseFloat(a) * this.rem; return "string" == typeof a && a.match(/rem$/) && (b += "px"), b }, k.px2rem = function (a) { var b = parseFloat(a) / this.rem; return "string" == typeof a && a.match(/px$/) && (b += "rem"), b } }(window, window.lib || (window.lib = {}));
    </script>

    <script type="text/javascript">

        $(function (){
            var rotateTimeOut = function (){
                $('#rotate').rotate({
                    angle:0,
                    animateTo:2160,
                    duration:8000,
                    callback:function (){
                        alert('网络超时，请检查您的网络设置！');
                    }
                });
            };
            var bRotate = false;

            var rotateFn = function (awards, angles, txt){
                bRotate = !bRotate;
                $('#rotate').stopRotate();
                $('#rotate').rotate({
                    angle:0,
                    animateTo:angles+1800,
                    duration:3000,
                    callback:function (){
                        $('#prize_'+txt).show(2);
                        // $('#prize_11').show(2);
                        // if(txt == 11) {
                        //     $('#address-html').show();
                        // }
                        bRotate = !bRotate;
                    }
                })
            };


            $('.pointer').click(function (){
                if(bRotate)return;
                layer.open({type: 2});
                $.post('/api/activity/prize', {'token': "{{$token}}", 'type':"{{$type}}"} , function (data) {
                    if(data.code == '0000'){
                        $('.prize-count').text($('.prize-count').text() - 1);
                        layer.closeAll();
                        var item = 3;
                        if(data.data == 11){
                            item = 0;
                        }else if(data.data == 12){
                            item = 2;
                        }else if(data.data == 8){
                            item = 1;
                        }
                        switch (item) {
                            case 0:
                                rotateFn(0, 360, data.data);
                                break;
                            case 1:
                                rotateFn(1, 270, data.data);
                                break;
                            case 2:
                                rotateFn(2, 180, data.data);
                                break;
                            case 3:
                                rotateFn(3, 90, data.data);
                                break;

                        }
                    }else{
                        layer.open({
                            content: data.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }
                });

            });

        });

    </script>

</head>
<body style="overflow-x:hidden;">
<div class="moon-share-content">
    <div class="moon-share-user">
        <div class="moon-share-user-headimg">
            <img src="{{$user->headimgurl}}">
        </div>
        <div class="moon-share-user-info">
            <div class="moon-share-nick">
                <div>{{ $user->nickname }}</div>
            </div>
            <div class="moon-share-like">
                @if($type == 1)
                    星光宝盒
                @elseif($type==2)
                    月光宝盒
                @endif
            </div>
        </div>
    </div>
</div>
<div class="turntable-bg" style="position: relative">

    <div class="pointer" style="
    position: absolute;
    top: 2.4rem;
    left: 4.1rem;
    z-index: 100;
"><img style="width: 1.9rem;" src="/imgs/pointer@2x-_02.png" alt="pointer"/></div>

    <div class="rotate" style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
"><img id="rotate" style="width: 80%" src="/imgs/xianghuobao.png" alt="turntable"/></div>

</div>
<div class="moon-share-prize-button pointer">
    <img src="/imgs/choujiang@2x.png">
</div>
<div style="color: #fff;text-align: center;">你还有<span class="prize-count">{{$user->xiaohongbao}}</span>次机会</div>

<a style="display: block;" href="{{env('APP_WEB_URL')}}/share?token={{$token}}&wid={{$wid}}" class="moon-share-chose-notice">返回我的首页</a>

<div class="moon-share-cy">参与人数:{{$cyCount}}</div>

<div class='bind-mobile' id="address-html" style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content'>
        <div class='bind-mobile-top'>填写收货地址</div>
        <div class='bind-mobile-input-content'>
            <div class='bind-mobile-input-item'>
                <input placeholder='收货人' id="name" type='text' />
            </div>
            <div class='bind-mobile-input-item yzm'>
                <input placeholder='手机号' id="mobile" type='text' />
            </div>
            <div class='bind-mobile-input-item yzm'>
                <input placeholder='收货地址(仅限广西区内)' id="address" type='text' />
            </div>
        </div>
        <div class='bind-mobile-button'>
            <img src='/imgs/comfir@2x.png'/>
        </div>
    </div>
</div>

<div class='bind-mobile' id="prize_0" style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    ">
        <img style="width: 100%" src="/imgs/xxcy@2x.png" />
        <div class='close'  id="0">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_8" style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/8@2x.png" />
        <div class='close'  id="8">
            <img src='/imgs/close.png '/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_9"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/9@2x.png" />
        <div class='close'  id="9">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_10"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/10@2x.png" />
        <div class='close'  id="10">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_11"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/11@2x.png" />
        <div class='prize-button' id="11">
            <img src='/imgs/shouhuodizhi@2x.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_12"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/12@2x.png" />
        <div class='close'  id="12">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_13"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/13@2x.png" />
        <div class='close'  id="13">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_14"  style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/14@2x.png" />
        <div class='close'  id="14">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>
<div class='bind-mobile' id="prize_15" style="display: none">
    <div class='am-modal-mask'></div>
    <div class='bind-mobile-content' style="background: none">
        <img style="width: 100%" src="/imgs/15@2x.png" />
        <div class='close' id="15">
            <img src='/imgs/close.png'/>
        </div>
    </div>
</div>


<script>
    
    $('.close').bind('click', function () {
        $('#prize_'+$(this).attr('id')).hide();
    });

    $('.prize-button').bind('click', function () {
       $('#prize_'+$(this).attr('id')).hide();
       $('#address-html').show();
    });
    
    $('.bind-mobile-button').bind('click', function () {
        var params = {
            name: $('#name').val(),
            mobile:$('#mobile').val(),
            address:$('#address').val(),
            token:"{{$token}}"
        };

        $.post('/api/activity/address', params, function (data) {
            if(data.code == '0000'){
                layer.open({
                    content: '添加成功'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                window.location.reload();
            }else{
                layer.open({
                    content: '添加失败'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        })
    });
</script>
</body>
</html>